<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 在data中第一个对象,里面放假数据,假数据的对象名传给组件 -->
      <!-- 这里还需要传一个布尔值给组件,因为组件里有些结构公司是不需要的,所以传一个布尔值过去,值默认设置为true,组件接收,给组件拿去做判断,当组件的那条结构v-if,不等于true的时候,才显示这个结构 -->
      <Treetollos :node-data="companyInfo" :is-root="true" @notice="Modifythe" />
      <hr>

      <el-tree
        :data="depts"
        default-expand-all
        :props="{
          label:'name'
        }"
      >
        <template #default="obj">
          <!-- {{ obj.data.name }}     这个方法可以显示数据的name值,组件自动帮我们循环好了 -->
          <!-- {{ obj.data.manager }} -->

          <!-- 使用父传之把 obj.data 传过去进行封装-->
          <!-- 接收子组件传来的自定义事件，通知让我们修改 isDialogShow变量的值，修改为true-->
          <Treetollos :node-data="obj.data" @del="getdel" @notice="Modifythe" @Theeditor="Edifeatures" />
        </template>
      </el-tree>

    </div>
    <!-- 注册弹窗组件 -->
    <!-- 把我们的变量，值为false传给子组件 -->
    <components ref="addDeta" :is-dialog-show="isDialogShow" :node-data="nodeData" @add="getdel" @CloseWindows="isDialogShow=false" />
  </div>
</template>

<script>
import { listToTrData } from '../../utils/index'
// 引入查询企业的部门列表接口
import { departments } from '../../api/departments'
// 引入封装好的结构
import Treetollos from './components/index.vue'
// 引入弹窗组件
import components from './components/components.vue'
export default {
  components: {
    Treetollos, components
  },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      depts: [],
      // 定义一个value变量，默认为false，因为子组件期待是fals
      isDialogShow: false,
      nodeData: {} // 当前点击的对象
    }
  },
  // 在自调用函数里请求数据,发起请求
  async created() {
    // 调用封装函数
    this.getdel()
  },
  // 封装请求函数
  methods: {
    async getdel() {
      const { depts } = await departments()

      console.log(52, depts)
      // this.depts = depts

      this.depts = listToTrData(depts, '')
    },
    // 子组件传来鹅自定义事件
    Modifythe(nodeData) {
      // 把isDialogShow修改为true，当点击了之后，让弹窗显示传来
      this.isDialogShow = true
      this.nodeData = nodeData
      // console.log(77, nodeData)
    },
    async  Edifeatures(nodeData) {
      // 把数据写死过去给他拿,
      //  async await 等待数据加载完,才弹窗
      await this.$refs.addDeta.Editing(nodeData.id)
      // 因为父传子太慢了.要等代码全部运行完,才进行传递,但是那么已经开始拿,所以拿不到
      this.isDialogShow = true
      this.nodeData = nodeData
    }
  }

}
</script>

<style>

</style>
